<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="references/css/style.css">
<title>Register</title>
<script src="references/js/jquery-2.1.0.min.js"></script>
<script>
	$(function() {
		$("#email").attr("pattern", "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
		$("#email").attr("required", "");
		$("#password").attr("required", "");
		$("#username").attr("required", "");
		$("#name").attr("required", "");
	});
	function checkPass() {
		//Store the password field objects into variables ...
		var pass1 = document.getElementById('password');
		var pass2 = document.getElementById('re-password');
		//Store the Confimation Message Object ...
		var message = document.getElementById('confirmMessage');
		//Set the colors we will be using ...
		var goodColor = "#66cc66";
		var badColor = "#ff6666";
		//Compare the values in the password field 
		//and the confirmation field
		if (pass1.value == pass2.value) {
			//The passwords match. 
			//Set the color to the good color and inform
			//the user that they have entered the correct password 
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "Passwords Match!"
			return true;
		} else {
			//The passwords do not match.
			//Set the color to the bad color and
			//notify the user.
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = "Passwords Do Not Match!"
			return false;
		}
	}
</script>
</head>
<body>
	<logic:notEqual name="role" value="Administrator">
				<logic:forward name="home" />
			</logic:notEqual>
	<br>
	  <div class="container">
    <section class="register">
      <h1>Add New</h1>
    
      <html:form action="/register" method="post"
		onsubmit="return checkPass();">
      <div class="reg_section personal_info">
      <h3> UserName</h3>
     <html:text property="username" styleId="username"></html:text>
       <h3> Email</h3>
      <html:text property="email" styleId="email"></html:text>
      </div>
      <div class="reg_section password">
      <h3> Password</h3>
     <html:password property="password" styleId="password"></html:password>
       <h3>Re-type Password</h3>
     <input type="password" id="re-password" required
			onkeyup="checkPass(); return false;" />
		<span id="confirmMessage" class="confirmMessage"></span>
      </div>
      <div class="reg_section password">
      <h3>Role</h3>
      <html:select property="role">
			
			<html:option value="0">Admin</html:option>
			<html:option value="1">Manager</html:option>
			<html:option value="2">Employee</html:option>
		</html:select>
      </div>
      <p class="terms">
        <label>
  
        </label>
        	<logic:notEmpty name="ErrorInfo">
		<bean:write name="ErrorInfo" />
	</logic:notEmpty>
      </p>
      <p class="submit"><input type="submit" name="commit" value="Add New"></p>
     </html:form>
      
    </section>
  </div>

</body>
</html>